<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../assets/v6.15.1-dist/ol.css">
  <style>
    .map {
      height: 800px;
      width: 100%;
    }
  </style>
  <script src="../assets/v6.15.1-dist/ol.js"></script>
</head>

<body>
  <h2>My Map</h2>
  <div id="map" class="map"></div>

  <script type="text/javascript">
    //    // 地图设置中心，设置到北京，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
    var center = ol.proj.transform([117.06667, 39.66667], 'EPSG:4326', 'EPSG:3857');

    //创建地图
    var map = new ol.Map({
      view: new ol.View({
        center: center,
        zoom: 4
      }),
      target: 'map'
    });

    // 添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
        //url: 'http://localhost:7080/{z}/{x}/{y}.jpg'
        url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'
        // url: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
      })
    });

    map.addLayer(offlineMapLayer);

    var beijing = ol.proj.fromLonLat([116.28, 39.54]);

    //实例化矢量点要素，通过矢量图层添加到地图容器中
    //这样就实现了预先加载图文标注
    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(beijing),
      name: '北京市',                         //名称属性
      population: 2115                       //人口数（万）
    });
    //设置点要素样式
    iconFeature.setStyle(createLabelStyle(iconFeature));
    //矢量标注的数据源
    var vectorSource = new ol.source.Vector({
      features: [iconFeature]
    });
    //矢量标注图层
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource
    });
    map.addLayer(vectorLayer);

    //矢量标注样式设置函数，设置image为图标ol.style.Icon
    function createLabelStyle(feature) {
      console.log(feature);
      return new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 60],              //锚点
          anchorOrigin: 'top-right',       //锚点源
          anchorXUnits: 'fraction',       //锚点X值单位
          anchorYUnits: 'pixels',         //锚点Y值单位
          offsetOrigin: 'top-right',      //偏移原点
          opacity: 0.75,
          src: 'image/x_dxd.png'  //图标的URL
        }),
        text: new ol.style.Text({
          textAlign: 'center',            //位置
          textBaseline: 'middle',         //基准线
          font: 'normal 14px 微软雅黑',    //文字样式
          text: feature.get('name'),      //文本内容
          fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#F00',
            width: 2
          })
        })
      });
    }

    map.on('click', function (evt) {
      var coordinate = evt.coordinate;        //鼠标单击点的坐标
      //新建一个要素ol.Feature
      var newFeature = new ol.Feature({
        geometry: new ol.geom.Point(coordinate),  //几何信息
        name: '标注点'
      });
      newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
      vectorSource.addFeature(newFeature);
    });
  </script>
</body>

</html>